import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
interface State {
    dataList: {
        nickName: string
        price: number
        color: string
    }[]
}

// use xxx
// namespace

// options api
// export const useHomeStore = defineStore('home_store', {
//     state(): State {
//         return {
//             dataList: [
//                 {
//                     nickName: 'xiaomi',
//                     price: 1999,
//                     color: 'red'
//                 },
//                 {
//                     nickName: 'huawei',
//                     price: 2999,
//                     color: 'green'
//                 }
//             ]
//         }
//     },
//     // 计算属性
//     getters: {
//         greenPhone: (state) =>
//             state.dataList.filter((item) => item.color === 'green')
//     },
//     // update state
//     actions: {
//         updatePhone(info: any) {
//             this.dataList.push(info)
//         }
//     }
// })

// composition api
export const useHomeStore = defineStore('home_store', () => {
    // state
    const dataList = ref<State['dataList']>([
        {
            nickName: 'xiaomi',
            price: 1999,
            color: 'red'
        },
        {
            nickName: 'huawei',
            price: 2999,
            color: 'green'
        }
    ])

    // getters
    const greenPhone = computed(() =>
        dataList.value.filter((v) => v.color == 'green')
    )

    // actions
    const updatePhone = (info: any) => {
        dataList.value.push(info)
    }

    return {
        dataList,
        greenPhone,
        updatePhone
    }
})
